<template>
	<view class="page">
		<view v-if="videoSwitch == 1">
			<view class="item">
				<view class="itemTile">
					银行卡号
				</view>
				<view class="itemContent">
					<u-input v-model="form.cardNum" :type="type" :border="border" placeholder="请输入卡号"
						input-align="right" />
				</view>
			</view>
			<view class="item" @click="selectkaiHuHang">
				<view class="itemTile">
					开户银行
				</view>
				<view class="itemContent">
					<view class="kaiHuHang">
						<text>{{bankName||'请选择'}}</text>
						<u-icon name="arrow-right" style="color: #666;margin:0 -8rpx  0 10rpx;"></u-icon>

						<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="list" range-key="name"
							@confirm="confirm"></u-picker>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="itemTile">
					持卡人姓名
				</view>
				<view class="itemContent">
					<u-input v-model="form.name" :type="type" :border="border" placeholder="请输入姓名"
						input-align="right" />
				</view>
			</view>
			<view class="footer">
				<view class="footerTxt">
					* 温馨提示：请正确输入银行卡号和持卡人姓名，确保提现到账。
				</view>
				<view class="checkBox">
					<!--  -->
					<u-checkbox-group>
						<u-checkbox v-model="chktVal" size="28" label-size="26" style="margin-right: 1rpx;">请阅读</u-checkbox>
					</u-checkbox-group>
					<text style="color: #2E6ADF;" @click="$next(`/pages/commissionCenters/UserServiceAgreement`,true)">《用户服务协议》</text><text>和</text><text style="color: #2E6ADF;" @click="$next(`/pages/commissionCenters/PrivacyPolicy`,true)">《隐私政策》</text>并勾选协议
				</view>
				<view class="submit" @click="submit">
					确认新增
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					cardNum: '',
					bankNameId: 0,
					name: '',
				},
				bankName: "",
				chktVal:true,
				show: false,
				list: [],
				videoSwitch: 0
			}
		},
		onShow() {
			this.getBankDepositRes()
			// 此方法来控制视频和此页面的隐藏
			this.getVideoSwitch()
		},

		methods: {
			getVideoSwitch() {
				this.$axios.request(this.$api.getParamsConfig, "GET", {
					config: "VIDEO_SWITCH"
				}).then((val) => {
					this.videoSwitch = val.data.paramValue
				})
			},
			getBankDepositRes() {
				this.$axios.request(this.$api.getBankDepositRes, "GET", {
					limit: 20
				}).then((val) => {
					this.list = val.data.list
					console.log(this.list, 'list')
					this.form.bankNameId = val.data.list[0].id
				})
			},
			selectkaiHuHang() {
				this.show = true
			},

			confirm(e) {
				this.list.forEach(item => {
					if (e[0] == item.id - 1) {
						this.bankName = item.name
						this.form.bankNameId = item.id
					}
				})
			},
			// 提交
			submit() {
				this.$axios.request(this.$api.addBankCard, "POST", this.form).then((val) => {
					uni.$emit('reloadData', val)
					this.$nextTick(() => {
						uni.navigateBack()
					})
				})

			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #F3F4F8;
		overflow-y: hidden;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		margin-bottom: 4rpx;
		padding: 0 32rpx;
	}

	.itemTile {
		height: 33rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 33rpx;
		color: #333333;
	}

	.kaiHuHang {
		height: 33rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 33rpx;
		color: #666;
	}

	.footer {
		width: 100%;
		height: 100%;
		background-color: #fff;
		margin-top: 16rpx;
		padding: 0 32rpx;
		overflow-y: auto;
	}

	.footerTxt {
		height: 28rpx;
		font-size: 23rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 28rpx;
		color: #FF2D55;
		margin: 32rpx auto 24rpx;
	}

	.submit {
		width: 686rpx;
		height: 80rpx;
		border-radius: 4rpx;
		background-color: #2E6ADF;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 80rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.checkBox {
		/* padding: 0 32rpx; */
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 26rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		color: #666;
		margin-bottom: 20rpx;
	}
</style>
